<script>
import {api} from "@/assets/static/js/settings";

export default {
  name: "LoginView",
  data() {
    return {
      username: '',
      password: '',
      mobile: '',
      sms: '',
      login_method: 'is_pwd',
      sms_interval: '获取验证码',
      is_send: false,
    }
  },
  methods: {
    go_register() {
      this.$router.push('/register')
    },
    change_login_method(method) {
      this.login_method = method;
    },
    check_mobile() {
      if (!this.mobile) return;
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        this.$message({
          message: '手机号有误',
          type: 'warning',
          duration: 1000,
          onClose: () => {
            this.mobile = '';
          }
        });
        return false;
      }
      // 校验手机号是否能发送验证码：只有后台存在才能发
      this.$axios({
        url: api.check_mobile,
        params: {'mobile': this.mobile}
      }).then(res => {
        if (res.results) {
          this.$message({type: "success", message: '可以正常发送'})
          this.is_send = true; // 发送验证码可以点击
        } else {
          this.$message({type: "error", message: '手机号未被注册，请先注册'})
          this.mobile = ''
        }
      })
    },
    send_sms() {
      if (!this.is_send) return;
      this.is_send = false; // 发送短信按钮不能点击了
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
      // 发送短信
      this.$axios({
        url: api.send_sms,
        params: {mobile: this.mobile}
      }).then(res => {
        this.$message(res.msg)
      })
    },
    handleLoginData(res) {
      if (res.code === 100) {
        // 登陆成功
        // 把token，username，icon，存到cookie中
        this.$cookies.set('token', res.token, '7d')
        let userInfo = res.results
        this.$cookies.set('userInfo', JSON.stringify(userInfo), '7d')
        this.$router.push({name: 'home'})
      } else {
        // 登陆失败
        this.$message.error(res.msg)
        this.username = ''
        this.password = ''
      }
    }
    ,
    // 多方式登陆
    handleLogin() {
      // 1 用户名密码框不能为空
      if (this.username && this.password) {
        this.$axios({
          url: api.login,
          method: 'POST',
          data: {
            username: this.username,
            password: this.password
          },
        }).then(res => {
          this.handleLoginData(res)
        }).catch(err => {
          this.$message.error(`系统错误,请联系管理员${err}`)
        })
      } else {
        this.$message('用户名和密码必填')
      }
    },

    // 短信登陆
    handleSMSLogin() {
      if (this.mobile && this.sms) {
        this.$axios({
          url: api.login,
          method: 'POST',
          data: {
            username: this.mobile,
            captcha: this.sms
          },
        }).then(res => {
          this.handleLoginData(res)
        }).catch(err => {
          this.$message.error(err)
        })
      } else {
        this.$message('手机号和验证码不能为空')
      }
    }
  }

}
</script>

<template>
  <div class="main">
    <div class="login-box">
      <div class="left-box">
        <h1 class="login-title">用户登录</h1>
        <p class="login-sub-title">
          我始终相信，在这个世界上，一定有另一个自己，在做着我不敢做的事，在过着我想过的生活。——《猫的报恩》</p>
      </div>
      <div class="right-box">
        <div class="content">
          <div class="nav">
            <span :class="{active: login_method === 'is_pwd'}" @click="change_login_method('is_pwd')">密码登录</span>
            <span :class="{active: login_method === 'is_sms'}" @click="change_login_method('is_sms')">短信登录</span>
          </div>
          <el-form v-if="login_method === 'is_pwd'">
            <el-input
                placeholder="用户名/手机号/邮箱"
                prefix-icon="el-icon-user"
                v-model="username"
                clearable>
            </el-input>
            <el-input
                placeholder="密码"
                prefix-icon="el-icon-key"
                v-model="password"
                clearable
                show-password>
            </el-input>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form>
          <el-form v-if="login_method === 'is_sms'">
            <el-input
                placeholder="手机号"
                prefix-icon="el-icon-phone-outline"
                v-model="mobile"
                clearable
                @blur="check_mobile">
            </el-input>
            <el-input
                placeholder="验证码"
                prefix-icon="el-icon-chat-line-round"
                v-model="sms"
                clearable>
              <template slot="append">
                <span class="sms" @click="send_sms">{{ sms_interval }}</span>
              </template>
            </el-input>
            <el-button type="primary" @click="handleSMSLogin">登录</el-button>
          </el-form>
          <div class="foot">
            <!--            <span @click="go_register">立即注册</span>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
* {
  outline: none
}

a {
  color: #000;
  text-decoration: none
}

html, body, .main {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0) url("@/assets/static/images/login.jpg") no-repeat center center;
  background-size: cover
}

.login-box {
  display: flex;
  flex-direction: row;
  width: 1000px;
  height: 600px;
  border-radius: 8px;
  overflow: hidden
}

.login-box .left-box {
  width: calc(50% - 64px);
  height: calc(100% - 64px);
  background-color: rgba(78, 72, 255, .5);
  color: #fff;
  padding: 32px
}

.login-box .left-box .login-title {
  font-weight: 400;
  font-size: 32px
}

.login-box .left-box .login-sub-title {
  line-height: 32px
}

.login-box .right-box {
  width: 50%;
  height: 100%;
  background-color: #fff
}

.right-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  margin: 45px;
}

.el-icon-close {
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.el-icon-close:hover {
  color: darkred;
}


.nav {
  font-size: 20px;
  height: 38px;
  border-bottom: 2px solid darkgrey;
}

.nav > span {
  margin: 0 20px 0 35px;
  color: darkgrey;
  user-select: none;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 2px solid darkgrey;
}

.nav > span.active {
  color: black;
  border-bottom: 3px solid black;
  padding-bottom: 9px;
}

.el-input, .el-button {
  margin-top: 40px;
}

.el-button {
  width: 100%;
  font-size: 18px;
}

.foot > span {
  float: right;
  margin-top: 20px;
  color: orange;
  cursor: pointer;
}

.sms {
  color: orange;
  cursor: pointer;
  display: inline-block;
  width: 70px;
  text-align: center;
  user-select: none;
}
</style>